<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据管理-{$webname}</title>
</head>
<body>

{request 'pc/pub/header'}

<div class="admin-side">
    <div class="side-menu-block">
        <h3 class="side-menu-title">数据分析</h3>
        <ul class="side-menu-group">
            <li><a href="" class="item active">数据分析</a></li>
        </ul>
    </div>
</div>
<!-- 侧边栏导航 -->

<div class="admin-main">

    <div class="block-search-bar cl">
        <div class="item">
                <span class="select-box w100">
                    <select class="select" id="choose-type">
                        <option value="year" <?php if($search['type']=='year') echo 'selected';?>>按年查询</option>
                        <option value="month" <?php if($search['type']=='month') echo 'selected';?>>按月查询</option>
                    </select>
                </span>
            <span class="select-box w100 ml-5">
                    <select class="select" id="choose-year">
                        <?php $now_year = date("Y");$start_year = $now_year-5;?>
                        <?php for($y=$start_year;$y<=$now_year;$y++){?>
                        <option value="<?php echo $y;?>" <?php if($search['year']==$y) echo 'selected';?>><?php echo $y;?>年</option>
                        <?php }?>
                    </select>
            </span>
            <?php
                $display = 'none';
                if($search['type']=='month') $display='';
            ?>
            <span class="select-box w100 ml-5" style="display: <?php echo $display;?>">
                    <select class="select" id="choose-month" style="display: <?php echo $display;?>">
                        <option value="0">选择月份</option>
                        <?php for($m=1;$m<=12;$m++){?>
                        <option value="<?php echo $m?>" <?php if($search['month']==$m) echo 'selected';?> ><?php echo $m?>月</option>
                        <?php }?>
                    </select>
                </span>
        </div>
        <?php
        if(St_Functions::is_normal_app_install('supplierlinemanage') || St_Functions::is_normal_app_install('supplierhotelmanage') || St_Functions::is_normal_app_install('supplierspotmanage')){
        ?>
        <div class="item">
                <span class="select-box w100">
                    <select class="select" id="choose-pro-type">
                        <option value="0">产品类型</option>
                        <?php if(St_Functions::is_normal_app_install('supplierlinemanage')){?>
                        <option value="1" <?php if($search['proType']==1) echo 'selected';?>>线路</option>
                        <?php }?>
                        <?php if(St_Functions::is_normal_app_install('supplierhotelmanage')){?>
                        <option value="2" <?php if($search['proType']==2) echo 'selected';?>>酒店</option>
                        <?php }?>
                        <?php if(St_Functions::is_normal_app_install('supplierspotmanage')){?>
                        <option value="5" <?php if($search['proType']==5) echo 'selected';?>>门票</option>
                        <?php }?>

                    </select>
                </span>
            <span class="select-box w100 ml-5">
                    <select class="select" id="choose-pro-single">
                        <option value="0" <?php if($search['proSingle']==0) echo 'selected';?>>全部产品</option>
                        <option value="1" <?php if($search['proSingle']==1) echo 'selected';?>>单个产品</option>
                    </select>
                </span>
            <?php
                $pro_display = 'none';
                if($search['proSingle']==1) $pro_display='';
            ?>
            <a href="javascript:;" class="btn btn-primary radius size-M ml-15" id="selectProduct" style="display: <?php echo $pro_display;?>;">选择产品</a>
            <span id="choose-pro-box" style="display: <?php echo $pro_display;?>;">
                <?php if($search['proId']){?>
                <span class="check-child-item ml-5" id="choose-pro-id" data-id="<?php echo $search['proId']?>"><?php echo $search['proName'];?><i class="icon-delete" onclick="$(this).parent().remove();"></i></span>
                <?php } ?>
            </span>

        </div>
        <?php }?>
        <div class="item">
            <form action="" method="post">
                <input type="button" class="btn btn-default ml-5" id="check-search" value="查询">
                <input type="hidden" name="searchjson" id="searchjson" value="{}"/>
            </form>
        </div>
    </div>
    <!-- 搜索栏 -->

    <div class="panel-container mt-15">
        <div class="panel-head">
            <span class="tit-label">销量统计</span>
        </div>
        <div class="panel-body">
            <div class="charts-box" id="main0" style=" height: 400px"></div>
        </div>
    </div>
    <!-- 销量统计 -->

    <div class="panel-container mt-15">
        <div class="panel-head">
            <span class="tit-label">销售额统计</span>
        </div>
        <div class="panel-body">
            <div class="charts-box" id="main1" style=" height: 400px"></div>
        </div>
    </div>
    <!-- 销量统计 -->

    <div class="panel-container mt-15">
        <div class="panel-head">
            <span class="tit-label">渠道销售统计</span>
        </div>
        <div class="panel-body cl">
            <div class="charts-half-box">
                <div class="charts-title-bar">渠道销量</div>
                <div class="charts-box" id="main2" style="height: 400px"></div>
            </div>
            <div class="charts-half-box">
                <div class="charts-title-bar">渠道销售额</div>
                <div class="charts-box" id="main3" style="height: 400px"></div>
            </div>
        </div>
    </div>

</div>
<!-- 弹窗选中商品-->
<div class="hide pd-20" id="spotSelectBox">
    <div class="clearfix">
        产品名称：
        <input id="keyword" type="text" class="input-text w200 ml-5" placeholder="请输入产品名称">
        <a href="javascript:;" id="search-pro-key" class="btn btn-default ml-5">搜索</a>
    </div>
    <table class="table table-border table-bordered table-bg table-data mt-10" body_html=IrG0mD >
        <thead>
        <tr>
            <th width="10%">选择</th>
            <th width="20%">ID</th>
            <th width="60%">名称</th>
            <th width="10%">来源</th>
        </tr>
        </thead>
        <script id="tpl-item" type="text/html">
            <%# for(var i=0;i<d.length;i++){%>
            <%# var fstr = d[i].fstr;%>
            <%# if(d[i].fstr==null) fstr = '-';%>
            <tr class="text-c">
                <td>
                <input type="radio" id="checkbox-00" data-json='{"id":<% d[i].id %>,"name":"<% d[i].title %>"}'>
                </td>
                <td><% d[i].id %></td>
                <td><% d[i].title %></td>
                <td><% fstr %></td>
            </tr>
            <%# } %>
        </script>
        <tbody id="tpl-show">


        </tbody>
    </table>
    <div class="mt-10 clearfix">
        <div class="return-page f-r">
            <div class="f-r" id="layerReturnPage"></div>
        </div>
    </div>
    <!-- 翻页 -->
    <div class="hide pd-20 text-c c-666">没有搜到相关内容！</div>
    <!-- 搜索无结果 -->
</div>
<!-- 选择产品 -->


<script src="{$GLOBALS['cfg_res_url']}/js/v1/echarts/echarts.min.js"></script>
<script src="{$GLOBALS['cfg_res_url']}/js/v1/laypage/laypage.js"></script>
<script src="{$GLOBALS['cfg_res_url']}/js/v1/laytpl.js"></script>

<script>

    $(function () {
        //搜索条件联动(年/月)
        $('#choose-type').on('change',function () {
            var item = $(this);

            if(item.val()=='year')
            {
                $('#choose-month').hide();
                $('#choose-month').parent().hide();

                $('#choose-year').show();
                $('#choose-year').parent().show();
            }
            if(item.val()=='month')
            {
                $('#choose-month').show();
                $('#choose-month').parent().show();

                $('#choose-year').show();
                $('#choose-year').parent().show();
            }
        });

        $('#choose-pro-type').on('change',function () {
            var pro_type =  $('#choose-pro-type').val();
            if(pro_type==0){
                $('#choose-pro-single').val(0);
            }
        });
        //产品动态选择
        $('#choose-pro-single').on("change",function () {
            var item = $(this);
            var pro_type =  $('#choose-pro-type').val();
            if(pro_type==0)
            {
                $('#choose-pro-single').val(0);
            }
            console.log(pro_type);
            if(item.val()=='1')
            {
                $('#choose-pro-box').show();
                $('#selectProduct').show();
            }else{
                $('#choose-pro-box').hide();
                $('#selectProduct').hide();
            }
        });

        //点击搜索按钮后
        $('#check-search').on('click',function () {
            var url         = '/plugins/supplier/index/data';
            var searchJson  = {};
            searchJson.type        = $('#choose-type').val();
            searchJson.year        = $('#choose-year').val();
            searchJson.month       = $('#choose-month').val();
            searchJson.proType     = $('#choose-pro-type').val();
            searchJson.proSingle   = $('#choose-pro-single').val();
            searchJson.proId       = $('#choose-pro-id').data('id');
            searchJson.proName     = $('#choose-pro-id').text();
            //searchJson.proId=113;

            $(this).parent().attr('action',url);
            $('#searchjson').val(JSON.stringify(searchJson));
            $(this).parent().submit();
        });


        //绘制图表
        setCharts();
        //iCheck
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-grey',
            radioClass: 'iradio-grey',
            increaseArea: '0'
        });

        //选择产品（弹窗）
        $('#selectProduct').on('click', function () {
            layer.open({
                type: 1,
                title: '选择产品',
                area: ['800px', '670px'],
                btn: ['确定', '取消'],
                content: $('#spotSelectBox'),
                success:function (layero, index) {
                  var pro_type = $('#choose-pro-type').val();
                  var pro_url  = '/plugins/supplier/index/data_single';
                  searchItem(pro_url,pro_type,layero);
                  //console.log(pro_type);
                  $(layero).find('#search-pro-key').unbind('click');
                  $(layero).find('#search-pro-key').on('click',function () {
                      var pro_type = $('#choose-pro-type').val();
                      var pro_url  = '/plugins/supplier/index/data_single';
                      searchItem(pro_url,pro_type,layero)
                  });
                },
                yes:function (index, layero) {
                    console.log(layero);
                    var obj = $(layero).find('input:radio:checked').data('json');
                    if(obj)
                    {
                        $('#choose-pro-box').html('');
                        var pro_info = "<span class=\"check-child-item ml-5\" id=\"choose-pro-id\" data-id=\""+obj.id+"\">"+obj.name.substring(0,20)+"<i class=\"icon-delete\" onclick='$(this).parent().remove();'></i></span>\n" ;
                        $('#choose-pro-box').html(pro_info);
                        layer.closeAll();
                    }else{
                        layer.msg('请选择一个产品!');
                    }

                }
            })
        });

    });

    function searchItem(pro_url,pro_type,layero) {
        var keyword = $(layero).find('#keyword').val();
        $.get(pro_url,{type:pro_type,page:1,keyword:keyword},function (rsdata) {
            //rsdata.data = {};
            if(rsdata.status)
            {
                var tpldata = rsdata.data;
                var getTpl = $('#tpl-item').html();
                //console.log(getTpl);
                laytpl(getTpl).render(tpldata, function(html){
                    console.log(html);
                    $('#tpl-show').html(html);
                    //分页
                    laypage({
                        cont: $('#layerReturnPage'),
                        pages: rsdata.page_nums,
                        skin: '#28b779',
                        groups: 5,
                        first: '首页',
                        last: '尾页',
                        jump: function(obj, first){
                            if(!first) {
                                var page = obj.curr;
                                var pro_type = $('#choose-pro-type').val();
                                var keyword = $(layero).find('#keyword').val();
                                $.get(pro_url, {
                                    type: pro_type,
                                    page: page,
                                    keyword: keyword
                                }, function (rs_data) {
                                    console.log(rs_data);
                                    var tpldata = rs_data.data;
                                    var getTpl = $('#tpl-item').html();
                                    laytpl(getTpl).render(tpldata, function (html) {
                                        $(layero).find('#tpl-show').html(html);
                                    });
                                },'json');
                            }
                        }
                    });
                });
            }
        },'json');
    }

    //绘制图表
    function setCharts() {

        $('.charts-box').each(function (index) {

            var myChart = echarts.init($('#main' + index)[0]);

            var option = [
                {
                    title: {
                        show: false,
                        text: '销量统计',
                        x: 25,
                        y: 25
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            var relVal = params[0].name;
                            for (var i = 0, l = params.length; i < l; i++) {
                                relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "个";
                            }
                            return relVal;
                        },
                        padding: [5, 15],
                        textStyle: {
                            fontSize: 12,
                            fontFamily: 'Arial'
                        },
                        backgroundColor: 'rgba(0,13,94,.6)'
                    },
                    legend: {
                        show: true,
                        right: 20,
                        top: 15,
                        itemGap: 40,
                        itemWidth: 10,
                        itemHeight: 10,
                        data: [{
                            name: '消费数量',
                            icon: 'circle'
                        },
                            {
                                name: '支付数量',
                                icon: 'circle'
                            }]
                    },
                    grid: {
                        top: 50,
                        left: 80,
                        right: 50,
                        bottom: 40,
                        borderWidth: 1,
                        borderColor: '#e6e6e6'
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            <?php
                                $xaxis = array();
                                foreach ($data as $item)
                                {
                                    $xaxis[] = $item['key'];
                                }
                                $xaxis = json_encode($xaxis);
                            ?>
                            data: <?php echo $xaxis;?>,

                            axisLine: {    // 轴线
                                show: true,
                                lineStyle: {
                                    color: '#e5e5e5',
                                    type: 'solid',
                                    width: 1
                                }
                            },
                            axisTick: {
                                lineStyle: {
                                    color: '#e5e5e5'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#666'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f3f3f3',
                                    type: 'solid',
                                    width: 1
                                }
                            },
                            splitArea: {
                                show: true,
                                areaStyle: {
                                    color: ['#fafafa', '#fff']
                                }
                            }


                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '个',
                            nameTextStyle: {
                                color: '#666'
                            },
                            axisLine: {    // 轴线
                                show: true,
                                lineStyle: {
                                    color: '#e5e5e5',
                                    type: 'solid',
                                    width: 1
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#666'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f3f3f3',
                                    type: 'solid',
                                    width: 1
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'line',
                            name: '消费数量',
                            smooth: true,
                            symbolSize: 8,
                            <?php
                            $json = array();
                            foreach ($data as $item)
                            {
                                $json[] = $item['usenum'];
                            }
                            $json = json_encode($json);
                            ?>
                            data: <?php echo $json;?>,
                            itemStyle: {
                                normal: {
                                    color: '#3dd0bd',
                                    borderColor: '#3dd0bd'
                                },
                                emphasis: {
                                    color: '#3dd0bd',
                                    borderWidth: 3,
                                    borderColor: '#fff'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    color: '#3dd0bd'
                                }
                            }
                        },
                        {
                            type: 'line',
                            name: '支付数量',
                            smooth: true,
                            symbolSize: 8,
                            <?php
                            $json = array();
                            foreach ($data as $item)
                            {
                                $json[] = $item['paynum'];
                            }
                            $json = json_encode($json);
                            ?>
                            data: <?php echo $json;?>,
                            itemStyle: {
                                normal: {
                                    color: '#56a3f1',
                                    borderColor: '#56a3f1'
                                },
                                emphasis: {
                                    color: '#56a3f1',
                                    borderWidth: 3,
                                    borderColor: '#fff'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    color: '#56a3f1'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        show: false,
                        text: '销售额统计',
                        x: 25,
                        y: 25
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            var relVal = params[0].name;
                            for (var i = 0, l = params.length; i < l; i++) {
                                relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "元";
                            }
                            return relVal;
                        },
                        textStyle: {
                            fontSize: 12,
                            fontFamily: 'Arial'
                        },
                        padding: [5, 15],
                        backgroundColor: 'rgba(0,13,94,.6)'
                    },
                    legend: {
                        show: true,
                        right: 20,
                        top: 15,
                        itemGap: 40,
                        itemWidth: 10,
                        itemHeight: 10,
                        data: [{
                            name: '已结算收益',
                            icon: 'circle'
                        },
                            {
                                name: '订单收益总额',
                                icon: 'circle'
                            }]
                    },
                    grid: {
                        top: 50,
                        left: 80,
                        right: 50,
                        bottom: 40,
                        borderWidth: 1,
                        borderColor: '#e6e6e6'
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            <?php
                            $xaxis = array();
                            foreach ($data as $item)
                            {
                                $xaxis[] = $item['key'];
                            }
                            $xaxis = json_encode($xaxis);
                            ?>
                            data: <?php echo $xaxis;?>,
                            axisLine: {    // 轴线
                                show: true,
                                lineStyle: {
                                    color: '#e5e5e5',
                                    type: 'solid',
                                    width: 1
                                }
                            },
                            axisTick: {
                                lineStyle: {
                                    color: '#e5e5e5'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#666'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f3f3f3',
                                    type: 'solid',
                                    width: 1
                                }
                            },
                            splitArea: {
                                show: true,
                                areaStyle: {
                                    color: ['#fafafa', '#fff']
                                }
                            }


                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '元',
                            nameTextStyle: {
                                color: '#666'
                            },
                            axisLine: {    // 轴线
                                show: true,
                                lineStyle: {
                                    color: '#e5e5e5',
                                    type: 'solid',
                                    width: 1
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#666'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f3f3f3',
                                    type: 'solid',
                                    width: 1
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'line',
                            name: '已结算收益',
                            smooth: true,
                            symbolSize: 8,
                            <?php
                            $json = array();
                            foreach ($data as $item)
                            {
                                $json[] = $item['inmoney'];
                            }
                            $json = json_encode($json);
                            ?>
                            data: <?php echo $json;?>,
                            itemStyle: {
                                normal: {
                                    color: '#3dd0bd',
                                    borderColor: '#3dd0bd'
                                },
                                emphasis: {
                                    color: '#3dd0bd',
                                    borderWidth: 3,
                                    borderColor: '#fff'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    color: '#3dd0bd'
                                }
                            }
                        },
                        {
                            type: 'line',
                            name: '订单收益总额',
                            smooth: true,
                            symbolSize: 8,
                            <?php
                            $json = array();
                            foreach ($data as $item)
                            {
                                $json[] = $item['billmoney'];
                            }
                            $json = json_encode($json);
                            ?>
                            data: <?php echo $json;?>,
                            itemStyle: {
                                normal: {
                                    color: '#56a3f1',
                                    borderColor: '#56a3f1'
                                },
                                emphasis: {
                                    color: '#56a3f1',
                                    borderWidth: 3,
                                    borderColor: '#fff'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    color: '#56a3f1'
                                }
                            }
                        }
                    ]
                },
                {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: 15,
                        itemGap: 20,
                        itemWidth: 10,
                        itemHeight: 10,
                        data: [
                            {name: 'CMS平台', icon: 'circle'},
                            <?php if(isset($channel['meituan'])){?>
                            {name: '美团', icon: 'circle'}
                            <?php }?>
                            /*{name: '旅游村', icon: 'circle'},
                            {name: '携程', icon: 'circle'},
                            {name: '飞猪', icon: 'circle'},
                            {name: '其他', icon: 'circle'}*/
                        ]
                    },
                    series: [
                        {
                            name: '渠道销量',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'outside'
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var colorList = ['#975fe4', '#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            data: [
                                {value: <?php echo $channel['cms']['nums'];?>, name: 'CMS平台'},
                                <?php if(isset($channel['meituan'])){?>
                                {value: <?php echo $channel['meituan']['nums'];?>, name: '美团'}
                                <?php }?>
                                /*{value: 310, name: '旅游村'},
                                {value: 135, name: '携程'},
                                {value: 1548, name: '飞猪'},
                                {value: 520, name: '其他'}*/
                            ]
                        }
                    ]
                },
                {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: 15,
                        itemGap: 20,
                        itemWidth: 10,
                        itemHeight: 10,
                        data: [
                            {name: 'CMS平台', icon: 'circle'},
                            <?php if(isset($channel['meituan'])){?>
                            {name: '美团', icon: 'circle'}
                            <?php }?>
                           /* {name: '旅游村', icon: 'circle'},
                            {name: '携程', icon: 'circle'},
                            {name: '飞猪', icon: 'circle'},
                            {name: '其他', icon: 'circle'}*/
                        ]
                    },
                    series: [
                        {
                            name: '渠道销售额',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'outside'
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var colorList = ['#975fe4', '#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            data: [
                                {value: <?php echo $channel['cms']['money'];?>, name: 'CMS平台'},
                                <?php if(isset($channel['meituan'])){?>
                                {value: <?php echo $channel['meituan']['money'];?>, name: '美团'}
                                <?php }?>
                                /*{value: 310, name: '旅游村'},
                                {value: 135, name: '携程'},
                                {value: 1548, name: '飞猪'},
                                {value: 520, name: '其他'}*/
                            ]
                        }
                    ]
                },
            ];

            myChart.setOption(option[index]);

            $(window).on("resize", function () {

                myChart.resize();

            });


        });

    }

</script>


</body>
</html>